<template>
  <div>
    <div class="myeditor">
      <div style="margin:20px auto;">
        <h3>文章标题</h3>
        <el-input type="text" v-model="title"></el-input>
      </div>
      <div style="margin:20px auto;">
        <h3>文章头图</h3>
        <el-upload
          class="avatar-uploader"
          action="http://localhost:8010/eleupload"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="imageUrl" :src="imageUrl" class="headerimg" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </div>
      <h3>分类</h3>
      <div>
        <el-radio-group v-model="radio2" size="medium">
          <el-radio-button label="湖泊风景区"></el-radio-button>
          <el-radio-button label="山岳风景区"></el-radio-button>
          <el-radio-button label="森林风景区"></el-radio-button>
          <el-radio-button label="山水风景区"></el-radio-button>
          <el-radio-button label="海滨风景区"></el-radio-button>
          <el-radio-button label="休闲疗养避暑胜地"></el-radio-button>
          <el-radio-button label="宗教寺庙名胜区"></el-radio-button>
          <el-radio-button label="革命纪念地"></el-radio-button>
        </el-radio-group>
      </div>
      <h3>指定景点</h3>
      <div>
        <el-cascader  placeholder="请选择景点" v-model="value" :options="options" @change="handleChange"></el-cascader>
      </div>
      <h3>攻略内容</h3>
      <div id="editor"></div>
      <div class="buttons">
        <el-button type="warning" @click="save" style="float:left;">保存草稿</el-button>
        <el-button type="primary" @click="submit" style="float:right;">发布文章</el-button>
      </div>
    </div>
    <!-- <div id="editor1"></div> -->
    <!-- <ckeditor :editor="editor" v-model="editorData"></ckeditor> -->
  </div>
</template>
 
<script>
// if (process.client) {
// }

export default {
  data() {
    return {
      intro: "",
      title: "",
      imageUrl: "",
      imageFilename: "",
      content: "",
      editor: null,
      inputVisible: false,
      inputValue: "",
      radio2:null,
      value: [],
      options: [
        {
          value: "",
          label: "北京",
          children: [
            {
              value: "3007",
              label: "故宫"
            },
            {
              value: "3150",
              label: "十三陵"
            },
            {
              value: "7930",
              label: "中央电视塔"
            },
            {
              value: "3640",
              label: "居庸关长城"
            },
            {
              value: "17241",
              label: "京东石林峡"
            },
            {
              value: "181784",
              label: "呀路古热带植物园"
            },
            {
              value: "26798",
              label: "北京国际鲜花港"
            },
            {
              value: "32290",
              label: "世界公园"
            },
            {
              value: "18681",
              label: "水立方"
            },
            {
              value: "32289",
              label: "八大处公园"
            }
          ]
        },
        {
          value: "",
          label: "安徽省",
          children: [
            {
              value: "7939",
              label: "天柱山（世界地质公园）"
            },
            {
              value: "29001",
              label: "西递"
            },
            {
              value: "1021",
              label: "齐云山（四大道教名山"
            },
            {
              value: "1510",
              label: "呈坎"
            },
            {
              value: "5370",
              label: "查济古村"
            },
            {
              value: "373",
              label: "黄山温泉"
            },
            {
              value: "1381",
              label: "亳州花戏楼"
            },
            {
              value: "20019",
              label: "华祖庵"
            }
          ]
        },
        {
          value: "",
          label: "福建省",
          children: [
            {
              value: "28632",
              label: "厦门海上看金门（和平码头）"
            },
            {
              value: "28633",
              label: "鹭江夜游（和平码头）"
            },
            {
              value: "5115",
              label: "三坊七巷"
            },
            {
              value: "25218",
              label: "玉华洞国家风景名胜区"
            },
            {
              value: "179140",
              label: "环岛路海通联帆船出海"
            },
            {
              value: "208731",
              label: "大金湖"
            },
            {
              value: "32294",
              label: "泰宁明清园"
            },
            {
              value: "215001",
              label: "妈祖影视城"
            },
            {
              value: "183069",
              label: "五缘湾帆船港顽石帆船出海"
            },
            {
              value: "3136",
              label: "清水岩"
            }
          ]
        },
        {
          value: "",
          label: "甘肃省",
          children: [
            {
              value: "3557",
              label: "崆峒山景区"
            },
            {
              value: "5815",
              label: "敦煌阳关景区"
            }
          ]
        },
        {
          value: "",
          label: "广东省",
          children: [
            {
              value: "31723",
              label: "广东韶关丹霞山(丹霞地貌命名地)"
            },
            {
              value: "26515",
              label: "梦幻百花洲"
            },
            {
              value: "29961",
              label: "高明盈香生态园"
            },
            {
              value: "4038",
              label: "余荫山房"
            },
            {
              value: "3714",
              label: "深圳野生动物园"
            },
            {
              value: "3696",
              label: "深圳青青世界"
            },
            {
              value: "4416",
              label: "德庆盘龙峡景区"
            },
            {
              value: "20057",
              label: "观澜山水田园旅游文化园"
            },
            {
              value: "180222",
              label: "广东罗浮山风景名胜区"
            },
            {
              value: "3375",
              label: "万绿湖风景区"
            }
          ]
        },
        {
          value: "",
          label: "广西省",
          children: [
            {
              value: "26922",
              label: "桂林漓江精华漂流"
            },
            {
              value: "7997",
              label: "桂平西山"
            },
            {
              value: "5145",
              label: "姑婆山国家森林公园"
            },
            {
              value: "2845",
              label: "凭祥友谊关"
            },
            {
              value: "182592",
              label: "北海园博园"
            },
            {
              value: "11409",
              label: "涠洲岛"
            },
            {
              value: "29638",
              label: "桂林訾洲岛景区"
            },
            {
              value: "19544",
              label: "穿山公园"
            },
            {
              value: "1807",
              label: "广西月亮山"
            },
            {
              value: "1976",
              label: "阳朔西街"
            }
          ]
        },
        {
          value: "",
          label: "贵州省",
          children: [
            {
              value: "280",
              label: "贵州龙宫"
            },
            {
              value: "45760",
              label: "黄果树景区"
            },
            {
              value: "8279",
              label: "梵净山"
            },
            {
              value: "32163",
              label: "荔波瑶山古寨"
            },
            {
              value: "2914",
              label: "甲秀楼"
            },
            {
              value: "17925",
              label: "黔灵山"
            }
          ]
        },
        {
          value: "",
          label: "海南省",
          children: [
            {
              value: "9750",
              label: "西岛海洋文化旅游区"
            },
            {
              value: "16965",
              label: "海南热带野生动植物园"
            }
          ]
        },
        {
          value: "",
          label: "河北省",
          children: [
            {
              value: "6831",
              label: "白石山世界地质公园"
            },
            {
              value: "28628",
              label: "清东陵"
            },
            {
              value: "18039",
              label: "中国爱情山(天河山)"
            },
            {
              value: "29177",
              label: "娲皇宫景区"
            },
            {
              value: "8975",
              label: "青山关"
            },
            {
              value: "8943",
              label: "内丘扁鹊庙"
            },
            {
              value: "1993",
              label: "普陀宗乘之庙"
            },
            {
              value: "230879",
              label: "爱保野生动物世界"
            }
          ]
        },
        {
          value: "",
          label: "河南省",
          children: [
            {
              value: "5101",
              label: "云台山"
            },
            {
              value: "7974",
              label: "鸡冠洞"
            },
            {
              value: "27843",
              label: "大宋武侠城"
            },
            {
              value: "7966",
              label: "五龙口"
            },
            {
              value: "1648",
              label: "开封龙亭"
            },
            {
              value: "8766",
              label: "神仙洞景区"
            },
            {
              value: "31245",
              label: "老界岭"
            },
            {
              value: "26362",
              label: "九龙峡"
            },
            {
              value: "225730",
              label: "轿顶山风景区"
            }
          ]
        },
        {
          value: "",
          label: "湖北省",
          children: [
            {
              value: "219216",
              label: "武汉园博园"
            },
            {
              value: "3832",
              label: "武当山"
            },
            {
              value: "30884",
              label: "罗田大别山薄刀峰景区"
            }
          ]
        },
        {
          value: "",
          label: "湖南省",
          children: [
            {
              value: "922",
              label: "张家界天门山国家森林公园"
            },
            {
              value: "19987",
              label: "凤凰古城"
            },
            {
              value: "25323",
              label: "靖港古镇"
            },
            {
              value: "299",
              label: "黔阳古城芙蓉楼"
            },
            {
              value: "226731",
              label: "君山岛"
            },
            {
              value: "2688",
              label: "南岳水濂洞"
            }
          ]
        },
        {
          value: "",
          label: "吉林省",
          children: [
            {
              value: "36",
              label: "伪满皇宫博物院"
            },
            {
              value: "29846",
              label: "通化云霞洞"
            }
          ]
        },
        {
          value: "",
          label: "江苏省",
          children: [
            {
              value: "524",
              label: "南京总统府景区"
            },
            {
              value: "104",
              label: "明孝陵"
            },
            {
              value: "2968",
              label: "苏州天池花山"
            },
            {
              value: "12129",
              label: "苏州太湖国家湿地公园"
            },
            {
              value: "3279",
              label: "木渎古镇"
            },
            {
              value: "28571",
              label: "锡惠景区"
            },
            {
              value: "5824",
              label: "南京阅江楼"
            },
            {
              value: "20207",
              label: "荷塘月色湿地公园"
            },
            {
              value: "25881",
              label: "李中水上森林景区"
            },
            {
              value: "8130",
              label: "江阴鹅鼻嘴公园"
            }
          ]
        },
        {
          value: "",
          label: "江西省",
          children: [
            {
              value: "5594",
              label: "江西龙虎山"
            },
            {
              value: "28294",
              label: "南昌之星游乐园"
            },
            {
              value: "20209",
              label: "明月山"
            },
            {
              value: "189575",
              label: "上饶灵山风景名胜区"
            },
            {
              value: "9157",
              label: "梅岭"
            }
          ]
        },
        {
          value: "",
          label: "辽宁省",
          children: [
            {
              value: "7983",
              label: "锦州北普陀山"
            },
            {
              value: "525",
              label: "玉佛苑"
            },
            {
              value: "795",
              label: "清永陵"
            },
            {
              value: "9891",
              label: "大梨树生态旅游区"
            },
            {
              value: "232990",
              label: "辽阳一水云天温泉"
            }
          ]
        },
        {
          value: "",
          label: "内蒙古",
          children: [
            {
              value: "229266",
              label: "满洲里套娃广场"
            }
          ]
        },
        {
          value: "",
          label: "黑龙江",
          children: [
            {
              value: "16975",
              label: "峰岩山寨旅游度假区"
            }
          ]
        },
        {
          value: "",
          label: "重庆市",
          children: [
            {
              value: "31087",
              label: "乐和乐都主题公园"
            },
            {
              value: "8026",
              label: "重庆南山植物园"
            },
            {
              value: "2287",
              label: "金佛山"
            },
            {
              value: "229045",
              label: "烽烟三国"
            }
          ]
        },
        {
          value: "",
          label: "云南省",
          children: [
            {
              value: "1846",
              label: "崇圣寺三塔"
            },
            {
              value: "18841",
              label: "普达措国家公园"
            },
            {
              value: "18242",
              label: "曼听公园"
            },
            {
              value: "6213",
              label: "昆明金殿风景名胜区"
            },
            {
              value: "6455",
              label: "松赞林寺"
            },
            {
              value: "29295",
              label: "昆明世界园艺博览园"
            },
            {
              value: "6444",
              label: "建水朱家花园"
            },
            {
              value: "6419",
              label: "昆明市黑龙潭公园"
            },
            {
              value: "228908",
              label: "拉市海醉美港湾"
            },
            {
              value: "229709",
              label: "拉市海湿地公园"
            }
          ]
        },
        {
          value: "",
          label: "浙江省",
          children: [
            {
              value: "1951",
              label: "西塘古镇"
            },
            {
              value: "5231",
              label: "千岛湖"
            },
            {
              value: "2851",
              label: "仙都风景区（花千骨拍摄地）"
            },
            {
              value: "1722",
              label: "安吉藏龙百瀑"
            },
            {
              value: "5887",
              label: "诸葛八卦村"
            },
            {
              value: "5228",
              label: "杭州千岛湖森林氧吧"
            },
            {
              value: "9920",
              label: "慈城古县城"
            },
            {
              value: "5947",
              label: "新昌大佛寺"
            },
            {
              value: "5591",
              label: "浙西大峡谷"
            },
            {
              value: "5946",
              label: "诸暨五洩"
            }
          ]
        },
        {
          value: "",
          label: "西藏省",
          children: [
            {
              value: "381",
              label: "大昭寺"
            }
          ]
        },
        {
          value: "",
          label: "四川省",
          children: [
            {
              value: "7753",
              label: "熊猫基地"
            },
            {
              value: "29126",
              label: "成都国际非物质文化遗产博览园"
            },
            {
              value: "7739",
              label: "剑门关风景区"
            },
            {
              value: "27139",
              label: "建川博物馆聚落"
            },
            {
              value: "11591",
              label: "寻龙山景区"
            }
          ]
        },
        {
          value: "",
          label: "天津市",
          children: [
            {
              value: "32315",
              label: "天津欢乐谷"
            },
            {
              value: "1693",
              label: "大沽口炮台遗址"
            },
            {
              value: "220543",
              label: "意大利风情街（河北区）"
            }
          ]
        },
        {
          value: "",
          label: "陕西省",
          children: [
            {
              value: "10026",
              label: "金丝峡景区"
            },
            {
              value: "26978",
              label: "中坝大峡谷"
            },
            {
              value: "190427",
              label: "沣东农博园"
            },
            {
              value: "17447",
              label: "西安广仁寺"
            },
            {
              value: "7383",
              label: "张良庙"
            },
            {
              value: "28654",
              label: "咸阳海泉湾温泉世界"
            },
            {
              value: "230653",
              label: "太白山尚境温泉"
            },
            {
              value: "231212",
              label: "太白山生态酒店VIP卡"
            }
          ]
        },
        {
          value: "",
          label: "山西省",
          children: [
            {
              value: "5797",
              label: "常家庄园"
            },
            {
              value: "10161",
              label: "太行山大峡谷"
            },
            {
              value: "7362",
              label: "山西蟒河生态旅游区"
            },
            {
              value: "3785",
              label: "洪洞大槐树"
            },
            {
              value: "31226",
              label: "又见平遥"
            },
            {
              value: "7306",
              label: "乔家大院"
            },
            {
              value: "3786",
              label: "广胜寺"
            },
            {
              value: "9947",
              label: "悬空寺"
            },
            {
              value: "229838",
              label: "东岳庙景区"
            }
          ]
        },
        {
          value: "",
          label: "山东省",
          children: [
            {
              value: "7969",
              label: "泰山"
            },
            {
              value: "7978",
              label: "崂山"
            },
            {
              value: "6344",
              label: "周村古商城"
            },
            {
              value: "7523",
              label: "大珠山景区"
            },
            {
              value: "26657",
              label: "龙口南山旅游区"
            },
            {
              value: "7506",
              label: "青云山民俗游乐园"
            },
            {
              value: "7522",
              label: "青岛琅琊台"
            },
            {
              value: "7521",
              label: "浮来山"
            },
            {
              value: "20342",
              label: "珠山国家森林公园"
            },
            {
              value: "566",
              label: "岱庙"
            }
          ]
        },
        {
          value: "",
          label: "宁夏",
          children: [
            {
              value: "3311",
              label: "西夏陵"
            },
            {
              value: "3286",
              label: "拜寺口双塔景区"
            }
          ]
        },
        {
          value: "",
          label: "上海市",
          children: [
            {
              value: "106745",
              label: "上海宝山顾村公园"
            },
            {
              value: "6092",
              label: "上海鲜花港"
            },
            {
              value: "27131",
              label: "都市菜园"
            },
            {
              value: "21111",
              label: "大千生态庄园"
            },
            {
              value: "229672",
              label: "喜魔谷主题游戏馆"
            }
          ]
        }
      ]
    };
  },
  mounted() {
    if (process.client) {
      const ClassicEditor = require("@ckeditor/ckeditor5-build-classic");
      require("@ckeditor/ckeditor5-build-classic/build/translations/zh-cn");
      ClassicEditor.create(document.querySelector("#editor"), {
        language: "zh-cn",
        removePlugins: ["MediaEmbed"],
        ckfinder: {
          uploadUrl: "http://localhost:8010/upload"
        }
      })
        .then(editor => {
          // editor.isReadOnly = true; //将编辑器设为只读
          editor.data.viewDocument.isReadOnly = true; //将编辑器设为只读
          // editor.removePlugins = "toolbar";
          this.editor = editor;
          // this.editor.setData(this.content);
          if (this.$store.state.user.userInfo.token) {
            this.$axios
              .post("tempArticle/init/" + this.$store.state.user.userInfo.token)
              .then(res => {
                window.console.log(res);
                let data = res.data.article;
                this.content = data.content;
                this.imageUrl =
                  this.$axios.defaults.baseURL +
                  "/getImage?name=" +
                  data.headerimgurl;

                this.imageFilename = this.imageUrl;
                this.title = data.title;
                this.editor.setData(this.content);
              });
          }
        })
        .catch(err => {
          console.error(err);
        });
    }
  },
  methods: {
     handleChange(value) {
      console.log(value);
    },
    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.dynamicTags.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = "";
    },
    getIntro() {
      /**
       * 抽取纯文本作为简介
       */
      var re1 = new RegExp("<.+?>", "g"); //匹配html标签的正则表达式，"g"是搜索匹配多个符合的内容
      var msg = this.editor.getData().replace(re1, ""); //执行替换成空字符
      msg = msg.slice(0, 118);
      return msg;
    },
    //保存草稿提交
    save() {
      if (this.$store.state.user.userInfo.token) {
        this.$axios
          .post("/api2/tempArticle/save/" + this.$store.state.user.userInfo.token, {
            title: this.title,
            headerimgurl: this.imageFilename,
            content: this.editor.getData(),
            typeName: this.radio2,
            sid:this.value[1]
          })
          .then(res => {
            this.$message.success("保存草稿成功");
          });
      } else {
        this.$router.push("/user/login");
      }
    },
    //发布文章提交
    submit() {
      if (this.$store.state.user.userInfo.token) {
        this.$axios
          .post("/api2/article/save/" + this.$store.state.user.userInfo.token, {
            title: this.title,
            headerimgurl:
              "http://localhost:8010/getImage?name=" + this.imageFilename,
            content: this.editor.getData(),
            intro: this.getIntro(),
            typeName: this.radio2,
            sid:this.value[1],
            createdate: new Date()
          })
          .then(res => {
            this.$message.success(
              "发布成功,途中会被审核，如果你的文章不合格的话，会被撤回"
            );
            this.$axios.get("/api2/statstic/addcount?type=art")
            this.$router.push("/strategy");
          });
      }else{
         this.$router.push("/user/login");
      }
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      // window.console.log("res", res);
      this.imageFilename = res.url.split("=")[1];

      // this.imageFilename = res.data
    },
    beforeAvatarUpload(file) {
      const isIMG = file.type === "image/jpeg" || file.type === "image/png";
      if (!isIMG) {
        this.$message.error("上传图片只能时jpeg格式或png格式");
        return isIMG;
      }
      const isSize = new Promise(function(resolve, reject) {
        let width = 220;
        let height = 150;
        let _URL = window.URL || window.webkitURL;

        let img = new Image();
        img.src = file.name;
        window.console.log(file);

        img.onload = function() {
          window.console.log("src", img.src);
          let valid = img.width >= width && img.height >= height;
          valid ? resolve() : reject();
        };
        img.src = URL.createObjectURL(file);
      }).then(
        () => {
          
          return file;
        },
        () => {
          
          this.$message.error("上传的icon必须是等于或大于220*150!");
          return Promise.reject();
        }
      );
      return isSize;
    }
  }
};
</script>
<style scoped lang="less">
/deep/.ck-content {
  min-height: 50vh;
}

.myeditor {
  //   border: none !important;
  width: 60% !important;
  margin: 20px auto;
  .buttons {
    width: 250px;
    margin: 10px auto;
  }
}
/deep/.headerimg {
  width: 220px;
  height: 150px;
  border-radius: 0px;
  display: block;
  object-fit: cover;
  // border-radius: 50%;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
/deep/.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  &:hover {
    //   background: red;
    border-color: #409eff;
  }
}
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
// /deep/div.ck.ck-sticky-panel__content > div{
//   display: none;
// }
</style>

